<template>
    <div>
        <basic-container>
            <el-form ref="tableOptionSearch" :model="tableSearch" label-width="80px" size="mini" >
                <el-col :span="5">
                    <el-form-item label="审批状态:">
                        <el-select v-model="tableSearch.state" placeholder="请选择" >
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="item in this.statusList" :key="item.label" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item  label="审批号:">
                        <el-input v-model="tableSearch.number" placeholder="请输入审批号"></el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="5">
                    <el-form-item  label="申请部门:">
                        <el-input v-model="tableSearch.department" placeholder="请输入申请部门"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item  label="申请人:">
                        <el-input v-model="tableSearch.applicant" placeholder="请输入申请人"></el-input>
                    </el-form-item>
                </el-col> -->

                <el-col :span="4">
                    <el-form-item  label-width="20px">
                        <el-button type="primary" @click="tableOptionSearchSubmit">搜索</el-button>
                        <el-button @click="tableOptionSearchReset">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
            <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" @size-change='sizeChange' @current-change="currentPage" >
                <template slot-scope="scope" slot="appointmentStatus">
                    <template v-if="scope.row.appointmentStatus == 0">待审批</template>
                    <template v-else-if="scope.row.appointmentStatus == 1">审批中</template>
                    <template v-else-if="scope.row.appointmentStatus == 2">通过</template>
                    <template v-else-if="scope.row.appointmentStatus == 3">不通过</template>
                    <el-button type="info" class="processBtn" plain size="mini" @click.stop="processBtn(scope.row)">流程<!--<span hidden="hidden">{{scope.row.state}}</span>--></el-button>
                </template>
                <template slot-scope="scope" slot="slots">
                    {{scope.row.departmentName}}<span>-</span>{{scope.row.userName}}
                </template>
                <template slot-scope="scope" slot="menuLeft">
                    <el-button type="primary" size="small"  plain @click.stop="addMode = true">添加</el-button>
                </template>
                <template slot-scope="scope" slot="menu">
                    <el-button type="primary" size="small" v-if="scope.row.appointmentStatus !== 2 && scope.row.appointmentStatus !== 3"  plain @click.stop="examineModeBtn(scope.row,scope.index)">审核</el-button>
                    <el-button type="primary" size="small" plain @click.stop="seeModeBtn(scope.row,scope.index)">查看</el-button>
                    <el-button type="primary" size="small" v-if="scope.row.appointmentStatus == 0" plain @click.stop="updModeBtn(scope.row,scope.index)">修改</el-button>
                    <el-button type="primary" size="small" v-if="scope.row.appointmentStatus == 0" plain @click.stop="tableOptionDelBtn(scope.row,scope.index)">删除</el-button>
                </template>
            </avue-crud>
        </basic-container>

        <!--流程-->
        <el-dialog title="流程" :visible.sync="processMode" width="35%">
            <div class="block">
                <ul class="el-timeline is-reverse">
                    <li class="el-timeline-item" v-for="(activity, index) in activities" :key="index">
                        <div class="el-timeline-item__tail"></div>
                        <div class="el-timeline-item__node el-timeline-item__node--normal el-timeline-item__node--"></div>
                        <div class="el-timeline-item__wrapper">
                            <el-card>
                                <div class="el-timeline-item__content">
                                    审批人：{{ activity.userName }} 　
                                    <template v-if="activity.status == 0">待审批</template>
                                    <template v-else-if="activity.status == 1">审批中</template>
                                    <template v-else-if="activity.status == 2">通过</template>
                                    <template v-else-if="activity.status == 3">不通过</template>
                                </div>
                                <div class="el-timeline-item__timestamp is-bottom">{{ activity.verifyTime }}</div>
                                <h4>{{activity.content}}</h4>
                            </el-card>
                        </div>
                    </li>
                </ul>
            </div>

        </el-dialog>

        <!--添加-->
        <el-dialog title="添加借用单" :visible.sync="addMode" width="70%" center @close="resetForm('addModeFormRef')">
            <el-form ref="addModeFormRef" :model="tableOptionModeAddForm" :rules="addModeRemarksFormRules" label-width="80px" size="mini" >
                <el-col :span="22">
                    <el-form-item label="备注:" prop="remarks">
                        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1}" placeholder="最多可输入50字"
                                  ma v-model="tableOptionModeAddForm.remarks"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>

            <avue-crud  ref="addModeTabRef" :option="addModeTableOption" :data="gridData" :table-loading="tableLoading" class="customAvueForm"
                       @selection-change="selectionChange">
                <template slot-scope="scope" slot="menuLeft">
                    <el-button type="primary" size="small"  plain @click.stop="tableOptionModeSelect = true">选择设备</el-button>
                    <el-button type="primary" size="small"  plain @click.stop="tableOptionAddDel">删除</el-button>
                </template>
                <template slot-scope="scope" slot="equipmentTypeId">{{ comEqType(scope.row.equipmentTypeId) }}</template>
                <template slot-scope="scope" slot="warehouseId">{{ comLabType(scope.row.warehouseId) }}</template>
                <template slot-scope="scope" slot="time">
                    <div>
                        <div>
                            {{ scope.row.beginTime }}
                            <template v-if="scope.row.startPeriod == 0">全天</template>
                            <template v-else-if="scope.row.startPeriod == 1">上午</template>
                            <template v-else-if="scope.row.startPeriod == 2">下午</template>
                        </div>
                        <div>
                            {{ scope.row.endTime }}
                            <template v-if="scope.row.endPeriod == 0">全天</template>
                            <template v-else-if="scope.row.endPeriod == 1">上午</template>
                            <template v-else-if="scope.row.endPeriod == 2">下午</template>
                        </div>
                    </div>
                </template>
                <template slot-scope="scope" slot="menu">
                    <el-button type="primary" size="small"  plain @click.stop="tableOptionModeSelectRLBtn(scope.row,scope.index)">操作</el-button>
                </template>
            </avue-crud>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="addMode = false">取 消</el-button>
                <el-button size="small" type="primary" @click="addModeSubmit">添  加</el-button>
            </span>
        </el-dialog>

        <!---设备选择--->
        <el-dialog title="设备选择" :visible.sync="tableOptionModeSelect" center width="70%" @close="resetForm('tableOptionSearch')" @open="openAlertSelect">

            <el-col :span="24">
                <el-form ref="tableOptionSearch" :model="tableOptionSearch" label-width="80px" size="mini" :inline="true" class="demo-form-inline" >
                    <el-form-item label="仓库:" prop="warehouseId">
                        <el-select v-model="tableOptionSearch.warehouseId" placeholder="请选择">
                            <el-option label="全部" value="0"></el-option>
                            <el-option v-for="item in labList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="设备类别:" prop="equipmentTypeId">
                        <el-cascader
                            v-model="equipmentTypeIds"
                            :options="treeData"
                            :props="optionTree"
                            @change="handleNodeClick"></el-cascader>
                    </el-form-item> -->
                    <el-form-item label="设备编码" prop="coded">
                        <el-input v-model="tableOptionSearch.coded" placeholder="请输入设备编码"></el-input>
                    </el-form-item>
                    <el-form-item label="设备名称" prop="name">
                        <el-input v-model="tableOptionSearch.name" placeholder="请输入设备名称"></el-input>
                    </el-form-item>
                    <el-form-item label="设备型号" prop="model">
                        <el-input v-model="tableOptionSearch.model" placeholder="请输入设备型号"></el-input>
                    </el-form-item>
                    <el-form-item  label-width="20px">
                        <el-button type="primary" @click="searchFormSubmit()">搜索</el-button>
                        <el-button @click="resetForm('tableOptionSearch')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

            <el-col :span="24">
                <el-container>
                    <!-- <el-aside width="200px">
                        <el-tree :data="treeData" :props="optionTree" @node-click="handleNodeClick"></el-tree>
                    </el-aside> -->

                    <el-main>
                        <avue-crud :option="tableOptionSelect" :data="devList" :table-loading="tableLoading" @selection-change="selectionChangeA" :page="page" ref="crud" @size-change='sizeChanges' @current-change="currentPages" class="selectMrgin">
                            <!-- <template slot-scope="scope" slot="nameForm"></template> -->
                            <template slot-scope="scope" slot="equipmentTypeId">{{ comEqType(scope.row.equipmentTypeId) }}</template>
                            <template slot-scope="scope" slot="warehouseId">{{ comLabType(scope.row.warehouseId) }}</template>
                        </avue-crud>
                    </el-main>
                </el-container>
            </el-col>
            <span slot="footer" class="dialog-footer">
                <el-button size="small " @click="tableOptionModeSelect = false">取 消</el-button>
                <el-button size="small " type="primary" @click="addDevTo()">添  加</el-button>
            </span>
        </el-dialog>

        <el-dialog title="" :visible.sync="tableOptionModeSelectRL" width="70%">
            <basic-container>
                <ele-calendar
                        :render-content="renderContent"
                        :data="datedef"
                        :prop="prop"
                        :lunarcalendar="true"
                        currentmonth
                        border
                        @pick="datePick"
                ></ele-calendar>
            </basic-container>
        </el-dialog>

        <el-dialog title="借出时间" :visible.sync="tableOptionModeSelectRLDate" center width="40%" @close="resetForm('tableOptionModeSelectRLDateForm')">
            <el-form ref="tableOptionModeSelectRLDateForm" class="xhRed" :model="tableOptionModeSelectRLDateForm"  :rules="tableOptionModeSelectRLDateFormRules" label-width="100px" size="mini" >
                <el-form-item label="*" >
                    <p> 借出时间段若与他人借出时间重叠，则无法借出。</p>
                </el-form-item>
                <el-col :span="24">
                    <el-col :span="14">
                        <el-form-item label="开始时间:" prop="beginTime">
                            <el-date-picker
                                    v-model="tableOptionModeSelectRLDateForm.beginTime"
                                    type="date"
                                    placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-form-item label="" prop="startPeriod" label-width="0px" >
                            <el-select size="mini" v-model="tableOptionModeSelectRLDateForm.startPeriod" placeholder="请选择时间">
                                <el-option v-for="item in this.dayList" :key="item.label" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="14">
                        <el-form-item label="结束时间:" prop="endTime">
                            <el-date-picker
                                    v-model="tableOptionModeSelectRLDateForm.endTime"
                                    type="date"
                                    placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-form-item label="" prop="endPeriod" label-width="0px" >
                            <el-select size="mini" v-model="tableOptionModeSelectRLDateForm.endPeriod" placeholder="请选择时间">
                                <el-option v-for="item in this.dayList" :key="item.label" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="12">
                        <el-form-item>
                            <el-button size="small " @click="tableOptionModeSelectRLDate = false">取 消</el-button>
                            <el-button size="small " type="primary" @click="tableOptionModeSelectRLDateFormBtn()">添  加</el-button>
                        </el-form-item>
                    </el-col>
                </el-col>
                <el-form-item class="zindex1">
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="借出单" :visible.sync="examineMode" width="60%">
            <div id="printTest">
                <el-row :gutter="10">
                    <el-col :span="3">审批单号：</el-col>
                    <el-col :span="9">{{ checkInfo.approvalNumber}}</el-col>
                </el-row>
                <div class="lineDiv"></div>
                <el-row :gutter="10" v-if="examineModeType != 3">
                    <el-col :span="3">部门：</el-col>
                    <el-col :span="5">{{ checkInfo.departmentName }}</el-col>
                    <el-col :span="3">申请人：</el-col>
                    <el-col :span="5">{{ checkInfo.userName }}</el-col>
                    <el-col :span="3">申请时间：</el-col>
                    <el-col :span="5">{{ checkInfo.applicationTime }}</el-col>
                </el-row>
                <el-row :gutter="10" v-if="examineModeType != 3">
                    <el-col :span="3">备注：</el-col>
                    <el-col :span="21">{{ checkInfo.remarks }}</el-col>
                </el-row>
                <div class="lineDiv" v-if="examineModeType != 3"></div>
                <el-row :gutter="10">
                    <el-col :span="3">设备类别：</el-col>
                    <el-col :span="9"><template v-if="checkInfo.equipment.equipmentType">{{ checkInfo.equipment.equipmentType.name }}</template></el-col>
                    <el-col :span="3">设备编码：</el-col>
                    <el-col :span="9">{{ checkInfo.equipment.coded }}</el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="3">型       号：</el-col>
                    <el-col :span="9">{{ checkInfo.equipment.marking }}</el-col>
                    <el-col :span="3">设备名称：</el-col>
                    <el-col :span="9">{{ checkInfo.equipment.name }}</el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="3">仓 库：</el-col>
                    <el-col :span="9">{{ checkInfo.warehouse.name }}</el-col><!---laboratoryName--->
                    <el-col :span="3">品       牌：</el-col>
                    <el-col :span="9">{{ checkInfo.equipment.brand }}</el-col>
                </el-row>
                <el-row :gutter="10" v-if="examineModeType != 3">
                    <el-col :span="3">借出时间：</el-col>
                    <el-col :span="9">{{ checkInfo.borrowingEndTime }}</el-col>
                </el-row>
                <div class="lineDiv" v-if="examineModeType == 1"></div>
                <el-row :gutter="10" v-if="examineModeType == 1">
                    <el-col :span="3">审批状态：</el-col>
                    <el-col :span="5">
                        <template v-if="checkInfo.appointmentStatus == 0">待审批</template>
                        <template v-else-if="checkInfo.appointmentStatus == 1">审批中</template>
                        <template v-else-if="checkInfo.appointmentStatus == 2">通过</template>
                        <template v-else-if="checkInfo.appointmentStatus == 3">不通过</template>
                    </el-col>
                    <!-- <el-col :span="3">审批人：</el-col>
                    <el-col :span="5">xxxx</el-col>
                    <el-col :span="3">审批时间：</el-col>
                    <el-col :span="5">xxxxxxxx</el-col> -->
                </el-row>
                <!-- <el-row :gutter="10" v-if="examineModeType == 1">
                    <el-col :span="3">备注：</el-col>
                    <el-col :span="21">xxxxxxxx</el-col>
                </el-row> -->
                <el-row :gutter="10" v-if="examineModeType == 3">
                    <el-form ref="form" :model="checkInfo">
                        <el-form-item>
                            <el-col :span="3">借出时间：</el-col>
                            <el-col :span="16"><el-date-picker v-model="checkInfo.borrowingEndTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" type="date" placeholder="选择日期"></el-date-picker></el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="3">备注：</el-col>
                            <el-col :span="16"><el-input type="textarea" size="small" v-model="checkInfo.remarks" :autosize="{ minRows: 2, maxRows: 5}"
                                                         placeholder="最多可输入50字"></el-input></el-col>
                        </el-form-item>
                    </el-form>
                </el-row>
            </div>

            <span slot="footer" class="dialog-footer">
          <!-- <el-button size="small" type="primary" v-if="examineModeType == 1" v-print="'#printTest'">打  印</el-button> -->

          <el-button size="small" type="primary" @click="_approvalNumberVerify(2)" v-if="examineModeType == 2">通  过</el-button>
          <el-button size="small" type="primary" @click="_approvalNumberVerify(3)" v-if="examineModeType == 2">不通过</el-button>

          <el-button size="small" type="primary" @click="examineModeSubmit()" v-if="examineModeType == 3">提  交</el-button>

          <el-button size="small" @click="examineMode = false">关 闭</el-button>
        </span>
        </el-dialog>

        <!---审核备注弹窗-->
        <el-dialog :title="authModeTitle === 2 ? '通过' : '不通过'" :visible.sync="authMode" width="30%" @close="authText = ''">
            <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入审核内容"
                v-model="authText">
                </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="authMode = false">关 闭</el-button>
                <el-button size="small" type="primary" @click="_approvalNumberVerifys" v-if="examineModeType == 2">{{ authModeTitle === 2 ? '通过' : '不通过' }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
    import eleCalendar from 'ele-calendar'
    import 'ele-calendar/dist/vue-calendar.css'
    import { option, optionAdd,optionSelect,optionSelectForm,tableOptionModeSelectRLDateFormRules, jsonToArray} from "@/const-personal/equipment/appointment/lend.js"
    import { addModeRemarksFormRules } from "@/const-personal/public/verification.js"
    import { deepClone } from "@/util/util.js"
    import { validatenull } from '@/util/validate'
    import { DIC } from '@/const/dic'
    import { getListOfSearch, addAppointment, getListLab, pageQueryDevList, getDevTypeList, approvalProcess, findById, approvalNumberVerify, updateReservation, delReservation } from '@/api/equipment/appointment/lend.js'
    import { equipmentTypeTreeVChildrenNull } from "@/util/util.js"
    export default {
        data(){
            return{
                //数据字典
                DIC:DIC,
                //表单数据
                tableData:[],
                //等待表单
                tableLoading: false,
                //添加模态框
                addMode: false,
                //添加预约选择区间模态框
                tableOptionModeSelectRLDate: false,
                //添加预约选择区间表单
                tableOptionModeSelectRLDateForm:{
                    beginTime:'',
                    endTime:'',
                    startPeriod: 0,
                    endPeriod: 0,
                },
                //添加模態框表單
                addModeTableOption:optionAdd,
                //预约申请查询
                tableSearch:{
                    state: '', //状态
                    applicant:'', //申请人
                    department:'', //申请部门
                    number: '' //是那审批号
                },
                tableOptionSearch:{
                    warehouseId: '0', //设备状态
                    coded: '', //编码
                    name: '', //名称
                    model: '', //型号
                    equipmentTypeId: '', //设备类别id
                },
                equipmentTypeIds: [],
                //流程
                processMode: false,
                //流程数据
                activities: [{
                    content: '活动按期开始',
                    timestamp: '2018-04-15'
                }, {
                    content: '通过审核',
                    timestamp: '2018-04-13'
                }, {
                    content: '创建成功',
                    timestamp: '2018-04-11'
                }],
                //添加预约单数据
                tableOptionModeAddForm:{
                    remarks:''
                },
                //添加预约单表单验证
                addModeRemarksFormRules:addModeRemarksFormRules,
                //添加预约选择区间表单验证
                tableOptionModeSelectRLDateFormRules: tableOptionModeSelectRLDateFormRules,
                //日历插件
                datedef:[
                    {'date': "2019-10-14", 'content': '已预约', "cid": 0}
                ],
                //日历插件
                prop:'date', //对应日期字段名,
                updataMode:{
                    name: '',
                    text: ''
                },
                tableOptionModeSelectRL: false, //添加设备选择日历
                tableOption: option, //表格设置属性
                tableOptionAdd: optionAdd,
                tableOptionSelect: optionSelect,
                formOptionSelect: optionSelect,
                tableData: [], //表格的数据
                tablePage: 1,
                tabelObj: {},
                page: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10,//每页显示多少条
                    pageSizes: [5,10,20]
                },
                pages: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10,//每页显示多少条
                    pageSizes: [5,10,20]
                },
                grade: {
                    box: false,
                    check: []
                },
                gridData: [
                    // { idno: 2000101010, date: '2016-05-02', name: '测试1', state:'1', sbname:'测试1', sbxh:'测试1' } // 已选择的设备列表
                ],
                gridDataIndex: '',
                treeData:[], //设备类型 tree
                treeDev: [], //设备暂存区
                addMode: false,
                tableOptionModeSelect: false,
                selectionList:[],
                tableOptionModeSelectFrom:{},
                examineMode: false,
                examineModeType:0,
                labList: [], // 实验室列表
                devList: [], //设备列表
                optionTree: { // tree select
                    label: "name",
                    value: "id",
                    children: "children"
                },
                checkInfo: { //详情弹窗
                  equipment: '',
                  department: { equipmentType: '' },
                  warehouse: '',
                },
                authMode: false, //通过备注弹窗
                authModeTitle: '通过',
                authText: '',
                statusList: [
                    { value: 0, label: '待审批' },
                    { value: 1, label: '审批中' },
                    { value: 2, label: '通过' },
                    { value: 3, label: '不通过' },
                ],
                dayList: [
                    { value: 0, label: '全天' },
                    { value: 1, label: '上午' },
                    { value: 2, label: '下午' },
                ]
            }
        },
        components: {
            eleCalendar
        },
        computed: {
            devArrData () { // 设备类型 array
                return jsonToArray(this.treeData)
            },
            // 设备类别
            comEqType () {
                return ((type) => {
                    for (let i = 0; i < this.devArrData.length; i++) {
                        if (this.devArrData[i].id == type) {
                            // console.log("name:" + this.equipmentType[i].label)
                            return this.devArrData[i].name
                        }
                    }
                })
            },
            // 实验室
            comLabType () {
                return ((type) => {
                    for (let i = 0; i < this.labList.length; i++) {
                        if (this.labList[i].id == type) {
                            // console.log("name:" + this.equipmentType[i].label)
                            return this.labList[i].name
                        }
                    }
                })
            },

        },
        created () {
            this._getListLab();
            this._getDevTypeList();
            this.tableOptionSearchSubmit()
        },
        methods: {

            //预约申请表单查询
            tableOptionSearchSubmit(){
                this.tableLoading = true;
                let data = {
                    appointmentStatus: this.tableSearch.state,
                    approvalNumber: this.tableSearch.number
                    //name: this.tableSearch.name,
                    // description: this.tableSearch.description
                }
                data.page = this.page.currentPage;
                data.size = this.page.pageSize;
                getListOfSearch(data).then(res => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data.list;
                        this.page.total = res.data.data.total;
                        //this.page.currentPage = res.data.data.pageNum;
                        //this.page.pageSize = res.data.data.pageSize;
                        if(validatenull(this.tableData)){
                            this.tableOption.menu = false
                        } else {
                            this.tableOption.menu = true
                        }
                        this.tableLoading = false;
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger' });
                    }
                })
                // this.$notify({ title: "请求查询", type: 'success', message : this.tableSearch});
                // this.tableData = this.gridData;

            },
            // 切换页面
            currentPage (val) {
                this.page.currentPage = val;
                this.tableOptionSearchSubmit();
            },
            sizeChange (val) {
                this.page.pageSize = val
                this.tableOptionSearchSubmit()
            },
            // 切换页面
            currentPages (val) {
                this.pages.currentPage = val;
                this._pageQueryDevList();
            },
            sizeChanges (val) {
                this.pages.pageSize = val
                this._pageQueryDevList()
            },
            //预约申请表单重置
            tableOptionSearchReset(){
                this.tableSearch = {
                    state: '',
                    applicant:'',
                    department:'',
                    number: ''
                }
            },
            // 打开弹窗
            openAlertSelect() {
                this._pageQueryDevList();
            },
            // 搜索 设备 pw
            searchFormSubmit() {
                this._pageQueryDevList();
            },
            // 设备类别 tree select点击事件
            handleNodeClick(value) {
                console.log(value);
                // this.tableOptionSearch.equipmentTypeId = this.equipmentTypeIds[this.equipmentTypeIds.length - 1] || null
            },
            // 查询所有实验室 下拉列表接口 pw
            _getListLab() {
                getListLab().then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.labList = res.data
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
                    }
                })
            },
            // 查 设备类型 接口 pw
            _getDevTypeList() {
                getDevTypeList().then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.treeData = res.data;
                        // const { data } = res
                        // this.treeData = equipmentTypeTreeVChildrenNull(data)
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
                    }
                })
            },
            // 设备列表 接口 pw
            _pageQueryDevList() {
                this.tableLoading = true;
                this.tableOptionSearch.page = this.page.currentPage;
                this.tableOptionSearch.size = this.page.pageSize;
                pageQueryDevList(this.tableOptionSearch).then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.devList = res.data.list;
                        this.page.total = res.data.total;
                        this.page.pageSize = res.data.pageSize;
                        this.page.currentPage = res.data.pageNum;
                        this.tableLoading = false;
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
                    }
                })
            },
            // 设备列表选中事件
            selectionChangeA (selection) {
                // console.log(selection);
                this.treeDev = Object.assign([], selection);

                // this.$message.success('选中的数据'+ JSON.stringify(selection));
            },
            // 添加设备到 添加表格
            addDevTo() {
                if (!this.treeDev.length) {
                    this.$notify.info('请选择你需要操作的项目')
                    return;
                }
                this.gridData = this.gridData.concat(this.treeDev);
                this.tableOptionModeSelect = false;
            },
            // 表单重置 pw
            resetForm(formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields();
                })
                if (formName == 'addModeFormRef') {
                    this.gridData = [];
                }
            },
            //流程备注按钮
            processBtn(row){
                // this.$notify({ title: "请求查询流程", type: 'success', message : row});
                // this.activities
                console.log(row)
                approvalProcess({ approvalNumber: row.approvalNumber }).then(res => {
                    if (res.data.code == 200) {
                        this.activities = res.data.data;
                        this.processMode = true
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger' });
                    }
                })
            },
            //提交添加模态框
            addModeSubmit(){
                this.$refs['addModeFormRef'].validate((valid) => {
                    if(valid){
                        if (!this.selectionList.length) {
                            this.$notify.info("请选择需要添加的设备！");
                            return
                        }
                        // 预约时间 验证 beginTime/endTime
                        for (let i = 0; i < this.selectionList.length; i++) {
                            if (!this.selectionList[i].beginTime && !this.selectionList[i].endTime) {
                                this.$notify.info("请选择预约时间！");
                                return
                            }
                        }
                        let listArr = [];
                        let data = {
                            equipmentLableList: listArr
                        };
                        this.selectionList.forEach((item,i) => {
                            let po = {
                                id: item.id,
                                startPeriod: item.startPeriod,
                                endTime: item.endTime,
                                endPeriod: item.endPeriod,
                                beginTime: item.beginTime,
                                remarks: this.tableOptionModeAddForm.remarks,
                                warehouseId: item.warehouseId
                            }
                            console.log(item)
                            listArr.push(po);
                        })
                        console.log(JSON.stringify(data))
                        addAppointment(data).then(res => {
                            if (res.data.code == 200) {
                                this.addMode = false;
                                this.tableOptionSearchSubmit()
                                this.$notify({ title: "添加借用单成功", type: 'success'});
                            } else {
                                this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
                            }
                        })
                    }
                })
            },
            selectionChange(list){
                this.selectionList = list
                console.log(list)
            },
            // 表格查看 按钮
            seeModeBtn(row, index){
                this.examineModeType = 1;
                this.examineMode = true;
                this._findById(row.id);
            },
            // 表格审核 按钮
            examineModeBtn(row, index){
                this.examineModeType = 2;
                this.examineMode = true;
                this._findById(row.id);
            },
            // 查询详情接口
            _findById(val) {
                findById({ id: val }).then(res => {
                    if (res.data.code == 200) {
                        this.checkInfo = res.data.data;
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
                    }
                })
            },
            // 审核 通过2/不通过3 按钮
            _approvalNumberVerify(val) {
                this.authModeTitle = val;
                this.authMode = true;
            },
            // 通过不通过
            _approvalNumberVerifys() {
                if (!this.authText) {
                    this.$notify.info("请输入审核内容");
                    return
                }
                let data = {
                    id: this.checkInfo.id,
                    content: this.authText,
                    appointmentStatus: this.authModeTitle
                }
                approvalNumberVerify(data).then(res => {
                    if (res.data.code == 200) {
                        this.$notify({ title: "操作成功！", type: 'success'});
                        this.authMode = false;
                        this.examineMode = false;
                        this.tableOptionSearchSubmit();
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
                    }
                })

            },
            // 表格 修改按钮
            updModeBtn(row, index){
                this.examineModeType = 3;
                this.examineMode = true;
                this._findById(row.id);
            },
            // 删除
            tableOptionDelBtn(row, index){
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                }).then(() => {
                    //请求--删除
                    // this.$delete(this.gridData,index )
                    delReservation({ id: row.id }).then(res => {
                        if (res.data.code == 200) {
                            this.$notify({ title: '删除成功', type: 'success', });
                            this.tableOptionSearchSubmit()
                        } else {
                            this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
                        }
                    })
                });
            },
            //添加模态框删除
            tableOptionAddDel(){
                if(validatenull(this.selectionList)){
                    this.$notify.error({ title: '操作失败', message: '请选择至少一条数据！', type: 'danger', });
                    return;
                }
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                }).then(() => {
                    //请求--删除
                    this.selectionList.reverse();
                    this.selectionList.forEach(item => {
                        this.$delete(this.gridData,item.$index )
                    })
                    this.$refs['addModeTabRef'].toggleSelection(this.selectionList);
                    this.$notify({ title: '删除成功', type: 'success', });
                });
            },
            formhandleEmpty(){
                this.$refs.form.resetForm();
            },
            formhandleSubmit(){
                this.$refs.form.validate(vaild=>{
                    if(vaild){
                        this.$message.success(JSON.stringify(this.obj0));
                    }
                })
            },
            tableOptionModeSelectRLBtn(row, index){
                this.tableOptionModeSelectRL = true;
                // console.log(index)
                this.gridDataIndex = index
            },
            renderContent(h,parmas) {
                const loop = data =>{
                    return data.defvalue.value ? h('div', [
                            h('span', { style: {marginRight: '30px'},}, data.defvalue.Lunar.lDayChinese),
                            h('span', data.defvalue.text),
                            h('div', [
                                h('span', {
                                    props: {  style: 'lunarcalendarValue' },
                                    on: {
                                        click: () => { this.dialogTableVisible = true; }
                                    }
                                }, data.defvalue.value.content),
                                h('span', {
                                    props: {  style: 'lunarcalendarValue' },
                                    on: {
                                        click: () => { this.dialogTableVisible = true; }
                                    },
                                    style:{
                                        marginLeft: '2px'
                                    }
                                }, data.defvalue.value.content)
                            ])
                        ]):
                        h('div', [
                            h('span', { style: {marginRight: '30px'},}, data.defvalue.Lunar.lDayChinese),
                            h('span', data.defvalue.text)
                        ]);
                }
                return (
                    <div  class='lunarcalendarClass'>
                    {loop(parmas)}
                    </div>
                 );
            },
            datePick(date, event, row, dome) {
                console.log(date);
                console.log(event);
                console.log(row);
                console.log(dome);
                //判断该日期是否能被打开
                this.tableOptionModeSelectRLDate = true;
            },
            tableOptionModeSelectRLDateFormBtn(){
                this.$refs['tableOptionModeSelectRLDateForm'].validate((valid) => {
                    if (valid) {
                        console.log(JSON.stringify(this.tableOptionModeSelectRLDateForm))
                        this.$set(this.gridData[this.gridDataIndex], 'beginTime', this.tableOptionModeSelectRLDateForm.beginTime)
                        this.$set(this.gridData[this.gridDataIndex], 'endPeriod', this.tableOptionModeSelectRLDateForm.endPeriod)
                        this.$set(this.gridData[this.gridDataIndex], 'endTime', this.tableOptionModeSelectRLDateForm.endTime)
                        this.$set(this.gridData[this.gridDataIndex], 'startPeriod', this.tableOptionModeSelectRLDateForm.startPeriod)
                        this.tableOptionModeSelectRLDate = false;
                        this.tableOptionModeSelectRL = false;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 确认修改
            examineModeSubmit(){
                let data = {
                    id: this.checkInfo.id,
                    startTime: this.checkInfo.borrowingEndTime,
                    remarks: this.checkInfo.remarks,
                    appointmentStatus: this.checkInfo.appointmentStatus
                }
                updateReservation(data).then(res => {
                    if (res.data.code == 200) {
                        this.examineMode = false;
                        this.$notify({ title: '修改成功', type: 'success', });
                        this.tableOptionSearchSubmit()
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
                    }
                })
                // console.log(this.updataMode.name)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .el-row {
        margin-left: 20px!important;
        margin-bottom: 20px;
        .el-col-3{
            font-weight:600;
        }
    }
    .lineDiv{
        border-top: 1px solid #d6d6d6;
        margin: 0px 1% 20px 25px;
        width: 90%;
    }
    .el-dialog__body{
        padding-top: 15px;
        padding-bottom: 0px;
    }
</style>
<style lang="scss">
    .avue-crud__menu{
        min-height: 0px!important;
        margin-bottom: 0px!important;
    }
    .lunarcalendarClass{
        min-height:70px;
    }
    .lunarcalendarClass>div>div>span{
        border: 1px solid #409EFF;
        background-color: #409EFF;
        color: #FFFFFF;
        padding: 2px 13px;
        border-radius: 5px;
    }
    .zindex1>.el-form-item__content{
        z-index: -1;
    }
    .xhRed>div>label{
        color: red;
        width: 100px;
        font-size: 18px;
        padding: 3px 5px 0px 0px;
    }
    .selectMrgin>.avue-crud__tip{
        margin-top: 0px;
    }
</style>
